import { ConfigProvider } from 'vant';
import { defineComponent, KeepAlive, Suspense } from 'vue';
import { RouterView } from 'vue-router';
import './App.less';


export default defineComponent({
  name: 'App',
  setup() {
    const route = useRoute();

    return () => (
      <ConfigProvider
        theme-vars={{ blue: '#6476FF', navBarArrowSize: '1.4rem' }}
      >
        {/* 路由加载完成前显示loading，仅处理路由的加载，与接口加载速度无关 */}
        <Suspense onFallback={() => <div> Loading...</div>}>
          <RouterView key={route.fullPath}>
            {
              //@ts-ignore
              ({ Component, route }) => {
                const { meta } = route;
                const isKeepAlive = meta && meta.keepAlive;
                console.log(isKeepAlive,meta);
                
                return (
                  <>
                    {isKeepAlive ? (
                      <KeepAlive>

                        <Component
                        />
                      </KeepAlive>
                    ) : <Component
                    />
                    }
                  </>
                );
              }
            }
          </RouterView>
        </Suspense>
      </ConfigProvider>
    );
  }
});
